<template>
	<view class="fillintheformation">
		<view class="item" @click="goMain">
			<view class="name">
				报修房屋
			</view>
			<view class="details">
				南航碧桂园小区101栋2单元401
			</view>
			<view class="icon">

			</view>
		</view>
		<view class="item" @click="goMain">
			<view class="name">
				维修项目
			</view>
			<view class="details">
				水暖-浴霸
			</view>
			<view class="icon">
				<image src="../../../../static/icons/右箭头 (1).png" mode="" style="width: 40rpx;height: 40rpx;"></image>
			</view>
		</view>
		<view class="item">
			<view class="name">
				报修房屋
			</view>
			<view class="details">
				<input type="text" placeholder="请输入" />
			</view>
			<view class="icon">
			</view>
		</view>
		<view class="item">
			<view class="name" style="width: 100%;margin-bottom: 30rpx;">
				问题描述
			</view>
			<view class="details" style="margin-bottom: 30rpx">
				<input type="text" placeholder="请输入" />
			</view>
			<view class="icon">
			</view>
		</view>
		<view class="item">
			<view class="name">
				手机号码
			</view>
			<view class="details">
				<input type="text" placeholder="请输入手机号码" />
			</view>
			<view class="icon">
			</view>
		</view>
		<view class="item" @click="serverStore.flagshow=true">
			<view class="name">
				预约日期
			</view>
			<view class="details" style="color: #808080;">
				请选择预计上门时间
			</view>
			<view class="icon">
				<image src="../../../../static/icons/右箭头 (1).png" mode="" style="width: 40rpx;height: 40rpx;"></image>
			</view>
		</view>
		<view class="item">
			<view class="name" style="width: 100%;margin-bottom: 30rpx;">
				问题描述
			</view>
			<view class="details" style="margin-bottom: 30rpx">
				<view class="unloads">
					<view class="texts">
						+<br />
						上传
					</view>
				</view>
			</view>
			<view class="icon">
			</view>
		</view>
		<button class="BTns" @click="enterOk">提交审核</button>
		<MaskAlert class="Maskalert">
			<view class="Time">
				<view class="title">
					<view class="offalert" @click="serverStore.flagshow = false">
						取消
					</view>
					<view class="enteralert" @click="serverStore.flagshow = false">
						确定
					</view>
				</view>
				<view class="content">
					<view class="item">
						<text>2020</text>
						<text>01</text>
						<text>01</text>
					</view>
					<view class="item">
						<text>2021</text>
						<text>01</text>
						<text>01</text>
					</view>
					<view class="item">
						<text>2022</text>
						<text>01</text>
						<text>01</text>
					</view>
				</view>
			</view>
		</MaskAlert>
	</view>
</template>

<script setup>
	import {
		useServerStore
	} from "../../../../stores/serverStore";
	import MaskAlert from "../../../../components/MaskAlert.vue"
	const serverStore = useServerStore()
	const goMain = () => {
		uni.navigateTo({
			url: "/pages/server/views/EnterSelectMain/EnterSelectMain"
		})
	}
	const enterOk = () => {
		uni.showToast({
			title: '提交成功'
		})
		setTimeout(() => {
			uni.redirectTo({
				url: '/pages/server/views/MaintenanceReport/MaintenanceReport'
			})
		}, 1000)
	}
</script>

<style lang="scss">
	.fillintheformation {
		padding: 30rpx;

		.Time {
			.content {
				padding-bottom: 50rpx;

				.item:nth-child(1) {
					border-bottom: 2rpx solid #f8f9fb;
				}

				.item:nth-child(2) {
					opacity: 0.5;
				}

				.item:nth-child(3) {
					opacity: 0.3;
				}

				.item {
					display: flex;
					justify-content: space-around;
					padding: 30rpx 0rpx;
				}
			}

			.title {
				display: flex;
				justify-content: space-between;
				padding-bottom: 30rpx;
				border-bottom: 2rpx solid #f2f2f2;

				.offalert {}

				.enteralert {}
			}
		}

		.BTns {
			background-color: #006eff;
			font-size: 35rpx;
			color: white;
			margin-top: 50rpx;
		}

		.item {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			border-bottom: 2rpx solid #f2f2f2;
			padding-bottom: 30rpx;
			margin-bottom: 30rpx;

			.icon {
				width: 40rpx;
			}

			.details {
				font-size: 28rpx;
				width: 400rpx;

				.unloads {
					width: 160rpx;
					height: 160rpx;
					background-color: #f1f7ff;
					text-align: center;
					position: relative;

					.texts {
						width: 100%;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						color: #808080;
					}
				}
			}
		}
	}
</style>